<template>
  <div>


    <div class="container">
      <div>
        {{detailInfo.oneSubjectName}}/{{detailInfo.twoSubjectName}}
      </div>
      <div id="courseInfo">
        <div class="left">
          <p><img :src="detailInfo.eduCourse.cover" width="500" height="300"></p>
          <p>浏览量：{{detailInfo.eduCourse.viewCount}}</p>
        </div>
        <div class="right" style="height: 325px;overflow: hidden;width: 400px">
          <h3>{{detailInfo.eduCourse.title}}</h3>
          <p>价格:￥{{detailInfo.eduCourse.price}}</p>
          <p v-if="detailInfo.eduCourse.price==0 || isBuy">
            <a href="#videoList" class="toView">立即观看</a>
          </p>
          <p v-else>
            <button style="width: 150px;height: 50px" @click="buyCourse">立即购买</button>
          </p>
        </div>
      </div>

      <div style="background: gainsboro">
        <div class="courseDescription">
          <h3>商品介绍</h3>
          <div v-html="detailInfo.description">
          </div>
        </div>

        <div class="teacherInfo" align="center">
          <h3>课程讲师</h3>
          <p><img :src="detailInfo.teacher.avatar" width="100px" height="100px" style="border-radius: 50%"></p>
          <h3>{{detailInfo.teacher.name}}</h3>
        </div>
      </div>

      <div style="background: gainsboro" id="videoList" >
        <h3>学习目录</h3>
        <dl v-for="(chapter,i) in detailInfo.chapterList" :key="i" >
          <dt @click="showVideo==i?showVideo=-1:showVideo=i">{{chapter.title}}</dt>
          <dd v-for="video in chapter.children" v-if="showVideo==i" style="margin-bottom: 10px">
            {{video.title}}
            <span v-if="detailInfo.eduCourse.price==0 || isBuy">
              <i style="float: right" class="el-icon-video-play" @click="transferVal(video.videoSourceId)"></i>
            </span>
            <span v-else>
              <a style="float: right;color: red;font-size: 20px" href="#" @click="buyCourse">立即购买</a>
            </span>
          </dd>

        </dl>

      </div>

      <div>
        <h3>评论(登录后可进行评论)</h3>

        <div id="commentInput" v-if="isLogin">
          <div>
            <textarea cols="50" rows="7" v-model="comment.content">

          </textarea>
          </div>
          <div align="right">
            <button @click="saveComment">评论</button>
          </div>

        </div>

        <div id="comment" v-for="comment in commentInfo.records">
          <div>
            <img :src="comment.avatar" width="70px" height="70px" style="border-radius: 50%">
          </div>
          <div class="commentContent">
            <p>
              <span>{{comment.nickname}}</span>
              <span>{{comment.gmt_create}}</span>
            </p>
            <p class="content">
              {{comment.content}}
            </p>
          </div>
        </div>

        <div align="center">
          <a href="javascript:void(0)"
             @click="getCommentInfo(commentInfo.current+1>commentInfo.pages?commentInfo.pages:commentInfo.current+1)">查看更多></a>
        </div>

      </div>

    </div>


  </div>
</template>

<script>

  import course from '../api/course'
import video from '../api/video'
  import comment from '@/api/comment'
  import cookie from 'js-cookie'
  import order from '@/api/order'
  export default {
    name: "courseDetail",
    data(){
      return{
        showVideo:0,
        detailInfo:[],//课程详情信息
        commentInfo:[],//评论数据
        comment:{},//评论对象数据
        isLogin:false,//是否登录
        order:{},//订单信息
        isBuy:false ,//用户是否购买课程
        courseId:this.$route.params.id//课程id
      }

    },
    created() {
      this.getCourseDetail()//获取课程详情信息
      this.getCommentInfo(1)//获取评论信息
      this.judgeLogin()//检查是否登录
      this.isBuyCourse()//是否购买课程

    },
    methods:{
      //获取课程详情
      getCourseDetail(){
        var id = this.$route.params.id
        course.getDetails(id)
          .then(response=>{
            console.log("详情"+response)
            this.detailInfo = response.data
          })
      },
      //视频播放
      transferVal(id){
        //调父组件方法显示视频播放窗口
        this.$emit('getMessage');
        //根据视频id获取凭证
        video.getAuth(id)
          .then(response=>{
            //视频播放
            var player = new Aliplayer({
              id: 'J_prismPlayer',
              width: '100%',
              height:'500px',
              autoplay: false,
              cover: 'https://i02piccdn.sogoucdn.com/c6b6d2ae7cac4898',
              encryptType:'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
              vid : id,
              playauth :response.data
            },function(player){
              console.log('播放器创建好了。')
            });
          })

      },
      //获取评论
      getCommentInfo(page){
        comment.getList(this.$route.params.id,page,3)
          .then(response=>{
            console.log("评论"+response.data)
            this.commentInfo=response.data
          })
      },
      //添加评论
      saveComment(){
        this.comment.courseId = this.detailInfo.eduCourse.id //评论所属课程id
        this.comment.teacherId = this.detailInfo.teacher.id //课程讲师id
        comment.saveComment(this.comment)
          .then(response=>{
            this.comment.content=''
            //重新获取评论
            this.getCommentInfo(1)
          })
      },
      //判断是否登录
      judgeLogin(){
        var userInfo = cookie.get("member_cookie");
        if(userInfo){
          this.isLogin = true
        }
      },
      //购买课程，生成订单
      buyCourse(){
        if(this.isLogin){
          this.order.courseId = this.detailInfo.eduCourse.id //课程id
          this.order.courseTitle = this.detailInfo.eduCourse.title //课程名称
          this.order.courseCover = this.detailInfo.eduCourse.cover //课程封面
          this.order.totalFee =this.detailInfo.eduCourse.price//课程价格
          this.order.teacherName = this.detailInfo.teacher.name  //讲师名称
          order.buyCourse(this.order)
            .then(response=>{
              this.$router.push({path:'/order/'+response.data})
            })
        }else{
          window.location.href='http://localhost:8080/#/Login/0'
        }


      },
      //用户是否购买过课程
      isBuyCourse(){
        console.log("isLogin"+this.isLogin)
        if(this.isLogin){
          order.isBuyCourse(this.courseId)
            .then(response=>{
              console.log("######"+response.data)
              this.isBuy = response.data
            })
        }

      }

    },



  }
</script>

<style scoped>
  #courseInfo{
    padding: 20px;
    background: lightsteelblue;
  }
  #courseInfo div{
    border: 1px solid;
    display: inline-block;
    margin-right: 20px;
  }
  .showview{
    display: none;
  }
  #videoList{
    font-size: 25px;
  }
  #comment{border: 1px solid}
  #comment div{
    display: inline-block;
  }
  .courseDescription,.teacherInfo{
    display: inline-block;
  }
  .courseDescription{
    width: 800px;
    height: 350px;
  }
  .teacherInfo{
    width: 300px;
    overflow: hidden;
    height: 350px;
    border: 1px solid;
    padding-top: 20px;
  }
  #commentInput{
    width: 380px;
    margin-bottom: 20px;
  }
  .toView{
    display: inline-block;
    height: 80px;
    background: greenyellow;
    width: 200px;
    text-align: center;
    font-size: 30px;
    line-height: 80px;
  }
</style>
